import React from 'react'
import { NavBar, Icon, Card, Badge } from 'antd-mobile'
import { getHouseList } from '../../api/allapi'
import { List } from 'react-virtualized'

const badgeStyleObj = {
  marginLeft: 12,
  padding: '0 3px',
  backgroundColor: '#fff',
  borderRadius: 2,
  color: '#f19736',
  border: '1px solid #f19736',
}
const thumbStyle = {
  width: '125px',
  height: '95px'
}

class Detail extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      houseListData: [],
      width: 0
    }
  }
  componentDidMount() {
    this.getHouseListData()
    const width = document.documentElement.clientWidth
    this.setState({
      width
    })
  }
  componentWillUnmount() {
    this.setState = state => {
      return
    }
  }
  // 获取房屋列表信息
  getHouseListData = async () => {
    const { location: { state: { home_type } } } = this.props
    const { data, meta: { status, msg } } = await getHouseList(home_type)
    if (status === 200) {
      this.setState({
        houseListData: data
      })
    } else {
      console.log(msg);
    }
  }
  // 点击返回上一页
  backToMain = () => {
    const { history } = this.props
    // history.push('/')
    history.goBack()
  }
  // list组件渲染单元格的方法
  rowRenderer = ({
    key, // Unique key within array of rows
    index, // Index of row within collection
    isScrolling, // The List is currently being scrolled
    isVisible, // This row is visible within the List (eg it is not an overscanned row)
    style, // Style object to be applied to row (to position it)
  }) => {
    return (
      <Card key={key} style={style}>
        <Card.Header
          thumb="http://127.0.0.1:8086/public/home.png"
          thumbStyle={thumbStyle}
          extra={
            <div>
              <Badge text={this.state.houseListData[index].home_desc} style={badgeStyleObj} />
              <Badge text={this.state.houseListData[index].home_name} style={badgeStyleObj} />
              <Badge text={this.state.houseListData[index].home_price} style={badgeStyleObj} />
              <Badge text={this.state.houseListData[index].home_tags} style={badgeStyleObj} />
              <Badge text={this.state.houseListData[index].home_time} style={badgeStyleObj} />
              <Badge text={this.state.houseListData[index].home_type} style={badgeStyleObj} />
            </div>
          }
        />
      </Card>
    );
  }
  render() {
    const { location: { state: { title } } } = this.props
    const houseListDataTemplate = this.state.houseListData.map((item, i) => {
      return (
        <Card key={i}>
          <Card.Header
            thumb="http://127.0.0.1:8086/public/home.png"
            thumbStyle={thumbStyle}
            extra={
              <div>
                <Badge text={item.home_desc} style={badgeStyleObj} />
                <Badge text={item.home_name} style={badgeStyleObj} />
                <Badge text={item.home_price} style={badgeStyleObj} />
                <Badge text={item.home_tags} style={badgeStyleObj} />
                <Badge text={item.home_time} style={badgeStyleObj} />
                <Badge text={item.home_type} style={badgeStyleObj} />
              </div>
            }
          />
        </Card>
      )
    })
    return (
      <div>
        {/* 导航 */}
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={this.backToMain}
        >{title}</NavBar>
        {/* 列表 */}
        {/* {houseListDataTemplate} */}
        <List
          width={this.state.width}
          height={500}
          rowCount={this.state.houseListData.length}
          rowHeight={110}
          rowRenderer={this.rowRenderer}
        />
      </div>
    )
  }
}
export default Detail
